﻿<!--
Project: ClipFlair (http://ClipFlair.codeplex.com)
Filename: CaptionsGrid.xaml
Version: 20150614
-->

<UserControl x:Class="ClipFlair.CaptionsGrid.CaptionsGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d:DesignHeight="167" d:DesignWidth="856"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    xmlns:sort="clr-namespace:System.ComponentModel;assembly=System.Windows"
    xmlns:btn="clr-namespace:ImageButtons;assembly=ImageButtons"
    xmlns:captions="clr-namespace:ClipFlair.CaptionsGrid"
             
    BorderThickness="0"
    MouseLeftButtonDown="UserControl_MouseLeftButtonDown"
   >

  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/CaptionsGrid;component/Themes/Generic.xaml" />
      </ResourceDictionary.MergedDictionaries>

      <CollectionViewSource 
        x:Key="SortedCaptions" 
        Source="{Binding Path=Captions.Children, Mode=TwoWay}"
        d:Filter="CollectionViewSource_Filter"
        > <!-- TODO: need some way to reapply the filter to existing rows, seems to only work on new rows --> <!-- maybe use PagedCollectionView -->
        <CollectionViewSource.SortDescriptions>
          <sort:SortDescription PropertyName="Begin" Direction="Ascending" />
        </CollectionViewSource.SortDescriptions>
      </CollectionViewSource>

    </ResourceDictionary>
  </UserControl.Resources>

  <Grid x:Name="LayoutRoot">

    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="DragStates">
        <VisualStateGroup.Transitions>
          <VisualTransition GeneratedDuration="0:0:0.3">
            <VisualTransition.GeneratedEasingFunction>
              <CircleEase EasingMode="EaseIn"/>
            </VisualTransition.GeneratedEasingFunction>
          </VisualTransition>
        </VisualStateGroup.Transitions>
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="DragOver">
<!--
          <Storyboard>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="gridCaptions">
              <EasingColorKeyFrame KeyTime="0" Value="#FFFFF7D1"/>
            </ColorAnimationUsingKeyFrames>
          </Storyboard>
-->          
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <toolkit:WrapPanel
      Name="Toolbar"
      Grid.Row="0"
      Orientation="Horizontal"
      Background="{StaticResource ToolbarBackground}"
      Margin="0"
      >
      <toolkit:WrapPanel.Resources>
        <Style TargetType="toolkit:WrapPanel">
          <Setter Property="Margin" Value="4,0" />
        </Style>
        <Style TargetType="btn:ImageButton">
          <Setter Property="Margin" Value="1,5" />
        </Style>
        <Style TargetType="btn:ImageToggleButton">
          <Setter Property="Margin" Value="1,7" />
        </Style>
        <Style TargetType="sdk:AutoCompleteBox">
          <Setter Property="Margin" Value="1,8" />
        </Style>        
      </toolkit:WrapPanel.Resources>

      <toolkit:WrapPanel Orientation="Horizontal">

        <btn:ImageButton
          Name="btnAdd" Click="btnAdd_Click"
          ToolTipService.ToolTip="{Binding tooltip_caption_add, Source={StaticResource localizedStrings}}"
          Image="Images/NewCaption.png"
          ImageHover="Images/NewCaption_hover.png"
          />

        <btn:ImageButton
          Name="btnRemove" Click="btnRemove_Click"
          ToolTipService.ToolTip="{Binding tooltip_caption_remove, Source={StaticResource localizedStrings}}"
          Image="Images/DeleteCaption.png"
          ImageHover="Images/DeleteCaption_hover.png"
          />

      </toolkit:WrapPanel>

      <toolkit:WrapPanel Orientation="Horizontal" Margin="4,2"> <!-- TODO: need to remove this Margin and fix all toolbar icons to have same height and bottomline -->

        <btn:ImageButton
          Name="btnStart" Click="btnStart_Click"
          ToolTipService.ToolTip="{Binding tooltip_caption_start, Source={StaticResource localizedStrings}}"
          Image="Images/SetStartTime.png"
          ImageHover="Images/SetStartTime_hover.png"
          />

        <btn:ImageButton
          Name="btnEnd" Click="btnEnd_Click"
          ToolTipService.ToolTip="{Binding tooltip_caption_end, Source={StaticResource localizedStrings}}"
          Image="Images/SetEndTime.png"
          ImageHover="Images/SetEndTime_hover.png"
          />

      </toolkit:WrapPanel>

      <toolkit:WrapPanel Orientation="Horizontal" Margin="4,2"> <!-- TODO: need to remove this Margin and fix all toolbar icons to have same height and bottomline -->

        <btn:ImageToggleButton
          x:Name="btnRTL"
          IsChecked="{Binding RTL, Mode=TwoWay}"
          ToolTipService.ToolTip="{Binding tooltip_TextDirection, Source={StaticResource localizedStrings}}"
          Image="Images/LTR.png"
          ImageHover="Images/LTR_hover.png"
          ImageChecked="Images/RTL.png"
          ImageCheckedHover="Images/RTL_hover.png"
          />
        
        <!-- TODO: add button here to swap punctuation marks from start to end of string [shown only when btnRTL is toggled on] -->

      </toolkit:WrapPanel>

      <toolkit:WrapPanel Orientation="Horizontal">

        <btn:ImageButton
          Name="btnImport" Click="btnImport_Click"
          ToolTipService.ToolTip="{Binding tooltip_captions_import, Source={StaticResource localizedStrings}}"
          Image="Images/ImportTimingCaptions.png"
          ImageHover="Images/ImportTimingCaptions_hover.png"
          />

        <btn:ImageButton
          Name="btnExport" Click="btnExport_Click"
          ToolTipService.ToolTip="{Binding tooltip_captions_export, Source={StaticResource localizedStrings}}"
          Image="Images/ExportTimingCaptions.png"
          ImageHover="Images/ExportTimingCaptions_hover.png"
          />

      </toolkit:WrapPanel>

      <toolkit:WrapPanel Orientation="Horizontal">

        <btn:ImageButton
          Name="btnSaveMergedAudio" Click="btnSaveMergedAudio_Click"
          ToolTipService.ToolTip="{Binding tooltip_merged_audio_save, Source={StaticResource localizedStrings}}"
          Image="Images/SaveMergedAudio.png"
          ImageHover="Images/SaveMergedAudio_hover.png"
          />

      </toolkit:WrapPanel>

      <!--
      <sdk:AutoCompleteBox
        Name="abFilterRole"
        Text="{Binding RoleFilter, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True}" 
        ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=captions:CaptionsGrid}, Path=Roles}" 
        IsTextCompletionEnabled="True"
        MinimumPrefixLength="0" 
        MinimumPopulateDelay="0"
        />
      --> <!-- TODO: show "Role" watermark in it or label before it -->

    </toolkit:WrapPanel>

    <sdk:DataGrid
      Name="gridCaptions"
      Grid.Row="1"
      BorderThickness="0"

      Background="Transparent"
      RowBackground="Transparent"
      AlternatingRowBackground="#FFFFFF"
      
      AutoGenerateColumns="False"
      
      HeadersVisibility="All"
      ColumnHeaderStyle="{StaticResource ColumnHeaderStyle}"
      
      ClipboardCopyMode="IncludeHeader"
      SelectionMode="Extended"
      
      AllowDrop="True" 
      Drop="gridCaptions_Drop"
      DragEnter="gridCaptions_DragEnter"
      DragOver="gridCaptions_DragOver"
      DragLeave="gridCaptions_DragLeave"
      
      SelectionChanged="grid_SelectionChanged"
      CurrentCellChanged="grid_CurrentCellChanged"
      
      ItemsSource="{Binding Source={StaticResource SortedCaptions}}"      
      >
      <!-- ItemsSource="{Binding Path=Captions.Children, RelativeSource={RelativeSource AncestorType=captions:CaptionsGrid}}" -->

      <sdk:DataGrid.Columns>
        <!-- order of columns must be same as at InitializeDataGrid in codebehind -->
        <sdk:DataGridTemplateColumn
          Header="#"
          CellTemplate="{StaticResource IndexCellTemplate}"
          IsReadOnly="True"
          />

        <sdk:DataGridTemplateColumn
          Header="START"
          CellTemplate="{StaticResource StartTimeCellTemplate}"
          CellEditingTemplate="{StaticResource StartTimeCellEditTemplate}"
          />

        <sdk:DataGridTemplateColumn
          Header="END"
          CellTemplate="{StaticResource EndTimeCellTemplate}"
          CellEditingTemplate="{StaticResource EndTimeCellEditTemplate}" 
          />

        <sdk:DataGridTemplateColumn
          Header="DURATION"
          CellTemplate="{StaticResource DurationCellTemplate}"
          CellEditingTemplate="{StaticResource DurationCellEditTemplate}"
          />

        <sdk:DataGridTemplateColumn
          Header="ROLE"
          CellTemplate="{StaticResource RoleCellTemplate}"
          CellEditingTemplate="{StaticResource RoleCellEditTemplate}"
          />

        <sdk:DataGridTemplateColumn
          Header="CAPTION"
          Width="*"
          CellTemplate="{StaticResource CaptionCellTemplate}"
          CellEditingTemplate="{StaticResource CaptionCellEditTemplate}"
          />
        
        <!-- for all columns after the one with Width="*" we have to explicitly set the Width -->
        <sdk:DataGridTemplateColumn
          Header="RTL"
          Width="30"
          CellTemplate="{StaticResource RTLCellTemplate}"
          IsReadOnly="True"
          />

        <sdk:DataGridTemplateColumn
          Header="CPL" 
          Width="30" 
          CellTemplate="{StaticResource CPLCellTemplate}" 
          IsReadOnly="True" 
          />

        <sdk:DataGridTemplateColumn
          Header="CPS" 
          Width="50" 
          CellTemplate="{StaticResource CPSCellTemplate}" 
          IsReadOnly="True" 
          />

        <sdk:DataGridTemplateColumn
          Header="WPM"
          Width="50"
          CellTemplate="{StaticResource WPMCellTemplate}"
          IsReadOnly="True"
          />

        <sdk:DataGridTemplateColumn
          Header="AUDIO"
          Width="115"
          CellTemplate="{StaticResource AudioCellTemplate}"
          IsReadOnly="True"
          />
        
        <sdk:DataGridTemplateColumn
          Header="COMMENTS"
          Width="100"
          CellTemplate="{StaticResource CommentsCellTemplate}"
          CellEditingTemplate="{StaticResource CommentsCellEditTemplate}"
          />
        
        <sdk:DataGridTemplateColumn
          Header="COMMENTS (AUDIO)"
          Width="124"
          CellTemplate="{StaticResource CommentsAudioCellTemplate}"
          IsReadOnly="True"
          />
        
      </sdk:DataGrid.Columns>
    </sdk:DataGrid>

  </Grid>

</UserControl>
